<template>
	<view class="pop-detail">
		<pop ref="pop" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="form-box">
				<view class="box-tiitle">
					上传附件
				</view>
				<view class="box-detail-content">
					<view class="box-content">
						<view class="box-detail-content-item">
							<view class="row-title">文档电子版</view>
							<view class="box-attach-row" >
								<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
								<text class="box-attach-name" @click="uploadFiles()">点击上传</text>
							</view>
						</view>
						<view class="box-detail-content-item" v-for="ites,idx in fileListDataOne" :key="idx">
							<view class="row-title"></view>
							<view class="row-content box-attach-row">
								<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
								<text class="box-attach-name">{{ ites.fileShowName||"无"}}</text>
							</view>
						</view>
					</view>
					<view class="uni-form-item form-item">
						<view class="title">文档名称</view>
						<input class="uni-input form-input" v-model="queryFormData.name" name="input" placeholder="请输入文档名称"/>
					</view>
					<view class="uni-form-item form-item">
						<view class="title">文档目录</view>
						<input class="uni-input form-input" v-model="queryFormData.directory" @click="showSinglePicker(1)" name="input" placeholder="请填写文档目录" disabled/>
					</view>
					<view class="uni-form-item form-item">
						<view class="title">文档编号</view>
						<input class="uni-input form-input" v-model="queryFormData.code" name="input" placeholder="请填写项目编号"/>
					</view>
					<view class="uni-form-item form-item date-pick-style">
						<view class="title">文档日期</view>
						<uni-datetime-picker class="form-picker" type="date" :value="date" start="2000-2-31" end="2050-12-30" @change="dateChange"></uni-datetime-picker>
						<image src="../../../../static/images/icon_calendar.png" mode=""></image>
					</view>
					<view class="uni-form-item form-item">
						<view class="title">负责人</view>
						<input class="uni-input form-input" v-model="queryFormData.operator" @click="showSinglePicker(2)" name="input" placeholder="请选择负责人" disabled/>
					</view>
					<view class="uni-form-item form-item">
						<view class="title">项目备注</view>
						<textarea v-model="sendData.beizhu" class="uni-input"></textarea>
					</view>
					<view class="uni-form-item form-item btn-box">
						<button type="default" class="btn-style" @click="handelBack">返回</button>
						<button type="default" class="btn-style" @click="handelSubmit">确认</button>
						
					</view>
				</view>
			</view>
		</pop>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker1" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm1" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		 <mpvue-picker :themeColor="themeColor" ref="mpvuePicker2" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		  @onConfirm="onConfirm2" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import pop from "@/components/ming-pop/ming-pop.vue"
	export default {
		components: {
			pop,
			mpvuePicker
		},
		data(){
			return{
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [3],
				pickerValueArray:[],
				
				queryFormData:{
					name:'',  //文档名称
					directory:'', //文档目录
					directory_value:'',
					code:'',
					date: '',//项目启动时间
					operatorId:'',
					operator:'', //负责人
					tags:'', //标签
					sealFlag:0, //是否盖章
					sealType:1, //是否由综合部存档
					remark:''
				},
				direction: "center",
				code:'',
				date: '2020-6-15',
				fileListDataOne:[],
				loadDocDirData:[],
				personList:[],
				docNewAttachId:''
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			},
			fileType:{
				type:String,
			}
		},
		methods:{
			popOpen(e) {
				//打开弹窗
				this.$refs.pop.show();
				this.getDataOne()
				this.getDataTwo()
			},
			handelBack(){
				this.$refs.pop.close()
			},
			async handelSubmit(){
				let data={}
				data.isadding=true
				data.datakey=this.pageData.dataKey
				data.sealFlag=0
				data.archiveFlag=1
				data.remark=this.queryFormData.remark
				data.directory=this.queryFormData.directory
				data.name=this.queryFormData.name
				data.code=this.queryFormData.code
				data.operatorId=this.queryFormData.operatorId
				data.docDate=this.date
				data.docNewAttachId=this.docNewAttachId
				uni.showLoading()
				const res = await this.$req({
					url:'ppp/document/save.do',
					method:'POST',
					data:data
				})
				if(res.data.success){
					console.log(res.data,"duke66666")
					setTimeout(()=>{
						this.$refs.pop.close()
						uni.hideLoading()
					},200)
				}else{
					uni.showToast({
						title:res.data.errors[0].content,
					})
				}
				
				
			},
			showSinglePicker(num) {
				let dataArry=[]
				this.pickerValueArray=[]
				if(num===1){
					if(this.loadDocDirData){
						dataArry=this.loadDocDirData
						 this.$refs.mpvuePicker1.show()
					}
					dataArry.map(item=>{
						this.pickerValueArray.push(
							{
								label: item.text,
								value: item.id
							}
						)
					})
				}else if(num===2){
					if(this.personList){
						dataArry=this.personList
						 this.$refs.mpvuePicker2.show()
					}
					dataArry.map(item=>{
						this.pickerValueArray.push(
							{
								label: item.CODE_NAME,
								value: item.CODE
							}
						)
					})
				}
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
			},
			onConfirm1(e) {
				console.log(e.value[0])
				this.queryFormData.directory= e.label
			    this.queryFormData.directory_value= e.value[0]
			},
			onConfirm2(e) {
				console.log(e.value[0])
				this.queryFormData.operator= e.label
			    this.queryFormData.operatorId= e.value[0]
			},
			onCancel(e) {
			    console.log(e)
			},
			
			
			dateChange(e,index) {
				this.date=e 
			},
			uploadFiles(){
				this.$util.upload('_'+this.fileType,'PPP_T_BUS_PROJ.'+ this.fileType,(data)=>{
					if(data){
						this.docNewAttachId=data[0].dataKey
						this.fileListDataOne.push({
							...data[0],fileShowName:data[0].name
						})
					}
				})
			},
			getUUID() {
			   var s = [];
			   var hexDigits = "0123456789abcdef";
			   for (var i = 0; i < 36; i++) {
			    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			   }
			   s[14] = "4"; 
			   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
			   s[8] = s[13] = s[18] = s[23] = "";
			
			   var uuid = s.join("");
			   return uuid;
			},
			async getDataOne(){
				const res = await this.$req({
					url:'ppp/document/loadDocDirData.do',
					method:'POST',
					data:{}
				})
				if(res.data){
					let jsonStr=res.data.attributes
					if(jsonStr){
						this.loadDocDirData=JSON.parse(jsonStr.json_data)
						console.log(this.loadDocDirData)
					}	
				}
			},
			async getDataTwo(){
				const res = await this.$req({
					url:'system/dataSourceManage/getZdyDataSource.do',
					method:'POST',
					data:{dataSourceTypes: 'currentUserJobDataSourceManage'}
				})
				if(res.data){
					this.personList=res.data.currentUserJobDataSourceManage
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	
	.box-attach{
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding: 0 10rpx;
		border-top: 1px solid #e8f0f2;
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		flex: 1;
		// padding: 0 18rpx;
		// height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			flex: 1;
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		// padding: 0 18rpx;
		// height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.add-box-detail-content{
		height: 90rpx;
		background-image: url(../../../../static/images/add.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 160rpx 46rpx;
		
	}
	// .border {
	// 	;
	// }
	.border-wid{
		border-bottom: 1px solid #e8f0f2
	}
	.form-picker {
		width: 400rpx;
	}
	
	.form-box{
		width: 690rpx;
		padding: 30rpx;
		.box-tiitle{
			height: 68rpx;
		}
		.box-detail-content {
			padding: 0 10rpx;
			// margin-top: 24rpx;
			border: 0;
			// &.border {
			// 	border-bottom: 1px solid #e8f0f2;
			// }
			.box-content{
				.box-detail-content-item {
					display: flex;
					flex-direction: row;
					// justify-content: flex-start;
					// justify-content: space-between;
					margin-bottom: 20rpx;
				
					.row-title {
						width: 170rpx;
						font-size: 28rpx;
						color: #414a5d;
						text-align: left;
						flex-shrink: 0;
						margin-right: 10rpx;
				
						&.mag {
							margin-left: 18rpx;
						}
					}
					
				
					.row-content {
						font-size: 26rpx;
						color: #414a5d;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
						text-align: left;
				
						&.mag {
							margin-right: 18rpx;
						}
					}
				}
			}
		}
		.uni-form-item{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 30rpx;
		}
		.btn-box{
			display: flex;
			justify-content: space-between;
			.btn-style{
				// width: 228rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				color: #0099cc;
			}
		}
		.date-pick-style{
			justify-content: flex-start;
			align-items: center;
			image{
				width:36rpx;
				height: 32rpx;
			}
			.text-input-hou{
				font-size: 26rpx;
				padding: 0 100rpx 0 20rpx;
			}
		}
		.title{
			width: 170rpx;
			flex-shrink: 0;
			font-size: 28rpx;
			color: #414a5d;
		}
		.uni-input{
			font-size: 28rpx;
			color: #808080;
			border:1px solid #dce4e6;
			flex:1;
		}
		.textarea-style{
			font-size: 28rpx; 
		}
	}
</style>
